<template>
  <div class="drug-categories">
    <div class="category-tools">
      <button class="primary-btn" @click="addCategory">新增分类</button>
      <button class="secondary-btn" @click="expandAll">展开全部</button>
      <button class="secondary-btn" @click="collapseAll">收起全部</button>
    </div>

    <div class="category-tree">
      <div v-for="category in categories" :key="category.id" class="category-node">
        <div class="category-header" @click="toggleCategory(category.id)">
          <span class="expand-icon" :class="{ expanded: category.expanded }">▶</span>
          <span class="category-name">{{ category.name }}</span>
          <span class="category-count">({{ category.drugCount }}种药品)</span>
          <div class="category-actions">
            <button class="action-btn" @click.stop="editCategory(category.id)">编辑</button>
            <button class="action-btn" @click.stop="addSubCategory(category.id)">添加子类</button>
            <button class="action-btn danger" @click.stop="deleteCategory(category.id)">删除</button>
          </div>
        </div>
        
        <div v-if="category.expanded && category.children" class="subcategories">
          <div v-for="subcat in category.children" :key="subcat.id" class="subcategory">
            <span class="subcategory-name">{{ subcat.name }}</span>
            <span class="category-count">({{ subcat.drugCount }}种)</span>
            <div class="category-actions">
              <button class="action-btn" @click="editCategory(subcat.id)">编辑</button>
              <button class="action-btn danger" @click="deleteCategory(subcat.id)">删除</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface DrugCategory {
  id: string
  name: string
  drugCount: number
  expanded: boolean
  children?: DrugCategory[]
}

const categories = ref<DrugCategory[]>([
  {
    id: 'C001',
    name: '处方药',
    drugCount: 456,
    expanded: true,
    children: [
      { id: 'C001-1', name: '抗生素类', drugCount: 123, expanded: false },
      { id: 'C001-2', name: '心血管类', drugCount: 89, expanded: false },
      { id: 'C001-3', name: '消化系统类', drugCount: 67, expanded: false }
    ]
  },
  {
    id: 'C002',
    name: '非处方药',
    drugCount: 234,
    expanded: false,
    children: [
      { id: 'C002-1', name: '感冒药', drugCount: 45, expanded: false },
      { id: 'C002-2', name: '止痛药', drugCount: 32, expanded: false },
      { id: 'C002-3', name: '外用药', drugCount: 28, expanded: false }
    ]
  },
  {
    id: 'C003',
    name: '中成药',
    drugCount: 167,
    expanded: false,
    children: [
      { id: 'C003-1', name: '清热解毒', drugCount: 34, expanded: false },
      { id: 'C003-2', name: '补益类', drugCount: 28, expanded: false }
    ]
  }
])

const toggleCategory = (categoryId: string) => {
  const category = categories.value.find(c => c.id === categoryId)
  if (category) {
    category.expanded = !category.expanded
  }
}

const expandAll = () => {
  categories.value.forEach(cat => cat.expanded = true)
}

const collapseAll = () => {
  categories.value.forEach(cat => cat.expanded = false)
}

const addCategory = () => {
  alert('添加新分类')
}

const editCategory = (categoryId: string) => {
  alert(`编辑分类: ${categoryId}`)
}

const addSubCategory = (parentId: string) => {
  alert(`添加子分类: ${parentId}`)
}

const deleteCategory = (categoryId: string) => {
  if (confirm('确定要删除这个分类吗？')) {
    alert(`删除分类: ${categoryId}`)
  }
}
</script>

<style scoped>
.drug-categories {
  font-size: 12px;
}

.category-tools {
  margin-bottom: 15px;
  display: flex;
  gap: 10px;
}

.primary-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}

.primary-btn:hover {
  background: #2980b9;
}

.secondary-btn {
  background: white;
  border: 1px solid #bdc3c7;
  padding: 6px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}

.secondary-btn:hover {
  background: #e8f4f8;
  border-color: #3498db;
}

.category-tree {
  border: 1px solid #ddd;
  background: white;
}

.category-node {
  border-bottom: 1px solid #f0f0f0;
}

.category-header {
  padding: 10px 15px;
  display: flex;
  align-items: center;
  cursor: pointer;
  background: #f8f9fa;
}

.category-header:hover {
  background: #e8f4f8;
}

.expand-icon {
  margin-right: 10px;
  font-size: 10px;
  transition: transform 0.2s;
}

.expand-icon.expanded {
  transform: rotate(90deg);
}

.category-name {
  font-weight: bold;
  color: #2c3e50;
  margin-right: 10px;
}

.category-count {
  color: #666;
  font-size: 11px;
}

.category-actions {
  margin-left: auto;
  display: flex;
  gap: 5px;
}

.subcategories {
  background: white;
}

.subcategory {
  padding: 8px 15px 8px 40px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f8f9fa;
}

.subcategory:hover {
  background: #f8f9fa;
}

.subcategory-name {
  margin-right: 10px;
  color: #333;
}

.action-btn {
  background: none;
  border: none;
  color: #3498db;
  cursor: pointer;
  text-decoration: underline;
  font-size: 11px;
  padding: 2px 4px;
}

.action-btn:hover {
  color: #2980b9;
}

.action-btn.danger {
  color: #e74c3c;
}

.action-btn.danger:hover {
  color: #c0392b;
}
</style> 